<template>
    <div class='userInfo'>
        <div >
           <img src="@/assets/images/img/userBg.jpg" style="width:100%;" alt="">
           <div>
               <img v-if="userInfo.photo==null&&userInfo.sex=='01001'" src="@/assets/images/img/man.png" >
               <img v-if="userInfo.photo==null&&userInfo.sex=='01002'" src="@/assets/images/img/women.png">
              <!-- <img v-if="userInfo.photo== null" src="@/assets/images/img/set_person.png" alt="">-->
               <img v-if="userInfo.photo!= null" :src="userInfo.photo" id="errorImg">
                <p class="name">{{userInfo.name}}</p>
              <!--  <p class="post">{{userInfo.post}}</p>
                <p class="org">{{userInfo.org}}{{userInfo.dept}}</p>-->
           </div>
        </div>
    </div>
</template>

<script>
//  import {mapState} from 'vuex'
import {getUser} from '@/service/getData';
import {getStore,getDefault} from '@/assets/config/mUtils';
    export default {
    	data(){
            return{
               userInfo : {
                name:'',
                dept:'',
                post:'',
                org:'',
                photo:'',
                sex:''
            }
            }
        },
        props: ['imgSrc', 'menuTitle'],
        created(){

        },
      mounted(){
        var data = getDefault();
        getUser(data).then(res=>{
          var userData = res.data.appPersonVo;
          this.userInfo.name = userData.name;
          this.userInfo.photo = userData.photo;

          this.userInfo.sex = userData.sex;
          console.log(res);

          this.$nextTick(function () {
            if(this.userInfo.photo!=null){
              var that = this;
              document.getElementById("errorImg").onerror = function (){
                that.userInfo.photo = null;
              };
            }
          });
        })

        },
        methods:{

        }
        // computed: {
        //     ...mapState([
        //         'userInfo'
        //     ]),
        // }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .userInfo{
        >div{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;

            >div{
                position: absolute;
                left: 0;
                top: 0;
                display: flex;
                 align-items: center;
                 flex-direction: column;
                 justify-content: center;
                 height: 100%;
                 width: 100%;
                 text-align: center;
                 color: #fff;
                 >img{
                     width: 2.6rem;
                    height: 2.6rem;
                     border-radius: 50%;
                 }
                 .name{
                     font-size: .6rem;
                     margin-top: .6rem;
                 }
                 .post{
                     margin-top: .5rem;
                 }
                 p{
                     font-size: .52rem;
                     margin-top: .4rem
                 }
            }
            >img{
                display: block;

            }
        }
    }
</style>
